<template>
  <div class="app-container">
    <div class="search-box">
      <el-input
        v-model="search.appTitle"
        placeholder="请输入标题"
        clearable
        size="large"
        @keyup.enter.native="searchQuery"
        class="form-controll"
      />
      <el-button type="success" @click="searchQuery" class="mt-15">搜索</el-button>
    </div>
    <div class="content">
      <div class="app-list">
        <div>
          <el-tabs v-model="activeName" @tab-click="onTabClick" stretch>
            <el-tab-pane
              v-for="item in controlData.appCategoryDictItems"
              :key="item.code"
              :label="item.name"
              :name="item.code"
            >
              <ul v-for="app in query.data" :key="app.appId" class="app-content">
                <div @click="onToAppDetail(app.appId)">
                  <li class="li1">{{ app.appTitle }}</li>
                  <li class="li2">{{ app.appAbstract }}</li>
                  <li class="li3">{{ app.appKeywords | formatterKeywords }}</li>
                  <li class="li4">
                    分类：
                    {{
                    app.appCategory
                    | DictItem(
                    controlData.appCategoryDictItems,
                    "name",
                    "code"
                    )
                    }}
                  </li>
                  <li v-if="app.updateTime" class="li4">更新日期：{{ app.updateTime }}</li>
                  <li v-else class="li4">更新日期：{{ app.createTime }}</li>
                </div>
              </ul>
              <el-empty v-if="!((query || {}).recordsTotal > 0)" description="暂无数据"></el-empty>
            </el-tab-pane>
          </el-tabs>
          <vxe-pager
            v-if="(query || {}).recordsTotal > 0"
            :current-page="query.startIndex"
            :page-size="query.pageSize"
            :total="query.recordsTotal"
            @page-change="onPageChange"
            :pageSizes="[5, 10, 20, 50, 100]"
          ></vxe-pager>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Editor from "@/components/Editor";
import Controller from "@/libs/framework/controller";

// 市场应用-开发框架字典code
const DEV_FRAMEWORK_TAG_NAME = "DevFramework";

export default class Instance extends Controller {
  onBeforeInit() {
    this.urls = {
      model: "/eip/marketApp/getListModel",
      query: "/eip/marketApp/query",
    };
  }

  onBeforeQuery(type, conditions, params) {
    if (type === "list") {
      params.query.appCategory = this.vm.activeName;
    }
  }

  mixin() {
    return {
      filters: {
        formatterKeywords(val) {
          if (val !== undefined && val !== null) {
            return val.replace(/,/g, " ").replace(/，/g, " ");
          }
        }
      },
      components: {
        Editor,
      },
      data() {
        return {
          activeName: DEV_FRAMEWORK_TAG_NAME,
        };
      },
      methods: {
        onPageChange({ currentPage, pageSize }) {
          this.fetchData({
            start: (currentPage - 1) * pageSize,
            length: pageSize,
          });
        },
        onToAppDetail(appId) {
          window.open("/eip/marketApp/detail?appId=" + appId);
        },
        onTabClick() {
          this.refresh();
        }
      }
    };
  }
}
</script>

<style scoped lang="scss">
.app-container {
  background: #ffffff;
  height: 100vh;
  overflow: auto;
}
.search-box {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
}
.search-box ::v-deep .el-input{
  width: 60%;
  margin:0 auto;
}
::v-deep .el-input__suffix{
  border-radius: 50px
}
.mt-15 {
  margin-top: 15px;
}
::v-deep .el-tabs__nav-scroll {
  width: 50% !important;
  margin: 0 auto !important;
}
.app-content {
  width: 100%;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
}

ul li {
  list-style-type: none;
  padding-top: 20px;
  margin-bottom: 10px;
}
.li1 {
  font-size: 20px;
  color: #595a78;
}
.li2 {
  color: #424249;
  font-size: 16px;
}
.li3 {
  color: #639069;
}
.li4 {
  color: #8c8c8c;
}
::v-deep .el-tabs__nav-wrap::after{
  height: 0;
}
::v-deep .el-tabs__item{
  font-size: 16px;
  font-weight: 700;
  color: #595a78
}
::v-deep .el-icon-arrow-left:before{
  content: none
}
::v-deep .el-icon-arrow-right:before {
    content: none;
}
</style>
